<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>调查问卷</title>
</head>
<style>
    button {
        position: relative;
        left: 200px;
        top: 30px;
    }
</style>

<body>
    <h1>调查问卷</h1>
    <form>
        <label>姓名:</label><input type="text" class="username"></input>
        &nbsp&nbsp<label>年龄</label>
        <select class="age">
            <option value="1~10岁">1~10岁</option>
            <option value="10~20岁">10~20岁</option>
            <option value="20~30岁">20~30岁</option>
            <option value="30~40岁">30~40岁</option>
            <option value="40~50岁">40~50岁</option>
            <option value="50~60岁">50~60岁</option>
            <option value="60~70岁">60~70岁</option>
        </select> &nbsp&nbsp&nbsp
        <label>爱好：
        <label><input type="checkbox" class="hobby" value="篮球">篮球</label>
        <label><input type="checkbox" class="hobby" value="足球">足球</label>
        <label><input type="checkbox" class="hobby" value="羽毛球">羽毛球</label>
        <label><input type="checkbox" class="hobby" value="乒乓球">乒乓球</label>
        </label>
        &nbsp&nbsp&nbsp&nbsp
        <label>
            性别:
        <label><input type="radio" name="sex" class="sex" value="男">男</label>
        <label><input type="radio" name="sex" class="sex" value="女">女</label>
        </label>

        </br>&nbsp&nbsp&nbsp&nbsp<label>建议:
            </br>&nbsp&nbsp&nbsp&nbsp<textarea  class="suggest" cols="50" rows="10">我的建议：</textarea>
        </label>
    </form>
    <button>提交</button>
</body>
<script>
    window.onload = function() {
        var btn = document.querySelector("button");
        btn.addEventListener("click", function(e) {
            var username = document.querySelector(".username");
            var age = document.querySelector(".age")
            var hobbyArr = document.querySelectorAll(".hobby")
            var sexArr = document.querySelectorAll(".sex");
            var suggest = document.querySelector(".suggest")
            console.log(username.value);
            console.log(age.value);


            for (var i = 0; i < hobbyArr.length; i++) {
                if (hobbyArr[i].checked) {
                    var hobby = hobbyArr[i].value;
                    console.log(hobby);
                }
            }



            for (var i = 0; i < sexArr.length; i++) {
                if (sexArr[i].checked) {
                    var sex = sexArr[i].value;
                }
            }
            console.log(sex);

            console.log(suggest.value);

        })
    }
</script>

</html>